<template>
  <div id="app">
    <header>头部</header>
    <main>
      <!-- 3 使用组件 -->
      <!-- 通信： 绑定自定义属性 -->
      <ColumnsList :list="tabs[activeIndex].children" />
    </main>
    <footer>
      <b v-for="(v, i) in tabs" :key="v.id"
        :class="i === activeIndex ? 'active': ''"
        @click="activeIndex = i"
      >{{ v.title }}</b>
    </footer>
  </div>
</template>

<script>
// 引入数据
const { tabs } = require('./mock/index');
// 1 引入组件
import ColumnsList from './components/ColumnsList.vue'
export default {
  data() {
    return {
      tabs,  /*tabs 数据*/
      activeIndex: 3 /*高亮下标*/
    }
  },
  // 2. 注册组件
  components: {
    ColumnsList
  }
}
</script>


<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  header {
    background: skyblue;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    height: 46px;
  }
  main {
    flex: 1;
    overflow-y: scroll;
    height: 100%;
  }
  footer {
    background: skyblue;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    height: 36px;
    .active {
      color: red;
    }
  }
}
</style>